<template>
  <view class="tp-history-items" v-if="items.length > 0">
    <view class="his-title-box">
      <text class="his-title">历史搜索</text>
      <ai-icon-button icon="icon-delete" :size="14" @click="clearHistory"></ai-icon-button>
    </view>
    <view class="his-selected-box">
      <view
        class="his-selected-item"
        v-for="(his, idx) in items"
        :key="'his-i-' + idx"
        @click="selected(his)">
        <view class="his-selected">{{his.label}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "tp-history-items",
    emits: ["selected", "clear"],
    props: {
      items: {
        type: Array,
        default: []
      }
    },
    data() {
      return {

      };
    },
    methods: {
      selected(his) {
        this.$emit("selected", his)
      },
      clearHistory() {
        this.$emit("clear")
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .tp-history-items {
    position: relative;

    .his-title-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 32px;
      .his-title {
        font-size: $font-size-md;
        font-weight: $font-weight-bold;
      }
    }
  }

  .his-selected-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: $gutter * 0.5;

    .his-selected-item {
      box-sizing: border-box;
      padding: 0 $gutter * 0.5 $gutter * 0.5 0;

      .his-selected {
        background-color: var(--gray-8);
        padding: 6px;
        max-width: 160px;
        
        border-radius: 6px;
        font-size: $font-size-md;
        color: var(--gray-1);
        cursor: pointer;
        box-sizing: border-box;
        
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
    }
  }
</style>